<template>
    <div class="container-fluid" v-loading="loading">

        <div class="row">
            <div class="col-lg-12">
                <div class="card">

                    <div class="card-toolbar clearfix">
                        <div class="row">
                            <div class="col-md-1"><img class="img-avatar img-avatar-48 m-r-10"
                                                          :src="userInfo.headimgurl" alt=""></div>
                            <div class="col-md-11">
                                <div class="row show-grid">
                                    <div class="col-xs-6 col-md-12 span-row-gutter">
                                        代理ID：{{ id }}
                                        <span> 用户ID: {{ userInfo.userId }}</span>
                                        <span> 用户名：{{ userInfo.nickname }}</span>
                                        <span> 手机号：{{ userInfo.mobile }}</span>
                                        <span> 推荐人：{{ userInfo.recommendName }}</span>
                                        <span> 高级代理：{{ userInfo.highLevelName }}</span>
                                    </div>
                                </div>
                                <div class="row show-grid">
                                    <div class="col-xs-6 col-md-12 span-row-gutter">
                                       代理级别：{{ agent.levelName }}
                                        <span> 注册时间: {{ userInfo.created_at }}</span>
                                        <span> 会员到期时间：{{ userInfo.vipTime | moment("YYYY-MM-DD HH:mm:ss") }}</span>
                                    </div>
                                </div>
                                <div class="row show-grid">
                                    <div class="col-xs-6 col-md-12 span-row-gutter">
                                        总支付总额：{{ userInfo.payMoney }}
                                        <span> 总直推注册人数：{{ agent.directPushNum }}</span>
                                        <span> 总直推付费人数：{{ agent.directPayNum }}</span>
                                    </div>
                                </div>
                                <div class="row show-grid">
                                    <div class="col-xs-6 col-md-12 span-row-gutter">
                                        总佣金：{{ agent.sumPrice }}
                                        <span> 直推佣金：{{ agent.commission }}</span>
                                        <span> 二级间推佣金：{{ agent.twoSumPrice }}</span>
                                        <span> 三级间推佣金：{{ agent.threeSumPrice }}</span>
                                        <span> 可提现佣金：{{ userInfo.money }}</span>
                                        <span> 已提现佣金：{{ userInfo.withdrawTotalPrice }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-left:10px">
                        <el-tab-pane label="直推用户" name="first">
                            <div class="row">
                                <div class="table-responsive" style="width: 100%;margin-top: 20px;margin-left: 10px;">
                                    <el-table
                                            :data="recommendList"
                                            style="width: 100%"
                                    >
                                        <el-table-column
                                                prop="user_id"
                                                label="用户ID"
                                                width="70">
                                        </el-table-column>
                                        <el-table-column
                                                prop="nickname"
                                                label="用户名"
                                                width="100">
                                            <template slot-scope="scope">
                                                <a @click="openUserEdit(scope.row.wechatUserId)" style="cursor:pointer;">{{
                                                    scope.row.nickname }}</a>
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                                prop="companyStr"
                                                label="关注公司"
                                                :formatter="formatCompany"
                                                width="140">
                                        </el-table-column>
                                        <el-table-column
                                                prop="isFollow"
                                                label="关注状态"
                                                :formatter="formatFollow"
                                                width="80">
                                        </el-table-column>
                                        <el-table-column
                                                prop="isVip"
                                                label="开通会员"
                                                :formatter="formatVip"
                                                width="80">
                                        </el-table-column>
                                        <el-table-column
                                                prop="recommendName"
                                                label="直接代理"
                                                :formatter="formatRecommendName"
                                                width="80">
                                        </el-table-column>
                                        <el-table-column
                                                prop="highLevel"
                                                label="高级代理"
                                                :formatter="formatHighLevelName"
                                                width="80">
                                        </el-table-column>
                                        <el-table-column
                                                prop="mobile"
                                                label="手机号"
                                                :formatter="formatMobile"
                                                width="80">
                                        </el-table-column>
                                        <el-table-column
                                                prop="created_at"
                                                label="注册时间"
                                                align="center"
                                                width="170">
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="直推付费用户" name="second">
                            <div class="row">
                                <div class="table-responsive" style="width: 100%;margin-top: 20px;margin-left: 10px;">
                                    <el-table
                                            :data="payList"
                                            style="width: 100%"
                                    >
                                        <el-table-column
                                                prop="user_id"
                                                label="用户ID"
                                                width="70">
                                        </el-table-column>
                                        <el-table-column
                                                label="用户名"
                                                width="100">
                                            <template slot-scope="scope">
                                                <a @click="openUserEdit(scope.row.wechatUserId)" style="cursor:pointer;">{{
                                                    scope.row.nickname }}</a>
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                                prop="companyStr"
                                                label="关注公司"
                                                :formatter="formatCompany"
                                                width="140">
                                        </el-table-column>
                                        <el-table-column
                                                prop="serviceName"
                                                label="会员期限"
                                                width="80">
                                        </el-table-column>
                                        <el-table-column
                                                prop="price"
                                                label="获得佣金"
                                                width="80">
                                        </el-table-column>
                                        <el-table-column
                                                prop="mobile"
                                                align="center"
                                                label="手机号"
                                                :formatter="formatMobile"
                                                width="140">
                                        </el-table-column>
                                        <el-table-column
                                                prop="open_vip_time"
                                                label="开通时间"
                                                align="center"
                                                width="170">
                                            <template slot-scope="scope">
                                                {{ scope.row.open_vip_time | moment("YYYY-MM-DD HH:mm:ss") }}
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>

                    <nav style="margin-top: 10px;padding-bottom: 10px">
                        <el-pagination
                                layout="total, sizes, prev, pager, next"
                                :total="total"
                                :hide-on-single-page="pageActive"
                                @size-change="handleSizeChange"
                                :page-size="pageSize"
                                :current-page="currentPage"
                                :page-sizes="[10, 20, 30, 40]"
                                @current-change="handleCurrentChange"
                        >
                        </el-pagination>
                    </nav>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "AgentDetailComponent",
        data(){
            return {
                userInfo:{},
                agent:{},
                id: $('meta[name="id"]').attr('content'),
                activeName: 'first',
                pageActive: true,
                recommendList: [],
                payList:[],
                pageSize: 10,
                total: 0,
                currentPage: 1,
                nickname:'',
                mobile:'',
                loading:true
            }
        },
        methods:{
            handleClick(tab, event) {
                console.log(tab, event);
                this.pageActive = true;
                this.mobile = '';
                this.nickname = '';
                this.pageSize = 10;
                this.total = 0;
                this.currentPage = 1;
                this.handleList();
            },
            handleList() {
                if (this.activeName === 'first') {
                    this.searchRecommend();
                } else {
                    this.searchPay();
                }
            },
            handleCurrentChange: function (val) {
                this.currentPage = val;
                this.handleList();
            },
            handleSizeChange:function(pageSize){
                this.pageSize = pageSize;
                this.handleList();
            },
            formatFollow(row) {
                return row.isFollow === 1 ? '关注中' : (row.isFollow== -1 ? '用户授权未关注' : '已取关');
            },
            formatVip(row) {
                return row.isVip === 1 ? '会员' : '非会员';
            },
            formatCompany(row){
                return this.filterLength(row.companyStr,6);
            },
            formatRecommendName(row){
                return !row.recommendName ? '--':row.recommendName;
            },
            formatHighLevelName(row){
                return !row.highLevelName ? '--':row.highLevelName;
            },
            formatMobile(row){
                return !row.mobile ? '--':row.mobile;
            },
            getAgentInfo() {
                let self = this;
                let uri = "user-extend/" + self.id;
                self.loading = true;
                axios.get(uri).then(function (result) {
                    self.userInfo = result.data.userInfo;
                    self.agent = result.data.agent;
                    self.loading = false;
                    self.searchRecommend();
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            searchRecommend: function () {
                let self = this;
                let uri = 'invitation/post-list';
                self.loading = true;
                let postData = {
                    page: self.currentPage,
                    limit:self.pageSize,
                    nickname: self.nickname,
                    mobile:self.mobile,
                    userId:self.userInfo.userId
                };

                axios.post(uri,postData).then(function (result) {
                    self.total = result.invitations.total;
                    if (self.total > 0) {
                        self.pageActive = false;
                    }else{
                        self.pageActive = true;
                    }
                    self.recommendList = result.invitations.data;
                    self.loading = false;
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            searchPay: function () {
                let self = this;
                let uri = 'income/post-list';
                self.loading = true;
                let postData = {
                    page: self.currentPage,
                    limit: self.pageSize,
                    nickname:self.nickName,
                    mobile:self.mobile,
                    userId:self.userInfo.userId
                };
                axios.post(uri,postData).then(function (result) {
                    self.total = result.incomes.total;
                    if (self.total > 0) {
                        self.pageActive = false;
                    } else {
                        self.pageActive = true;
                    }
                    self.payList = result.incomes.data;
                    self.loading = false;
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            openUserEdit:function (id) {
                this.openUri('wechat-user/detail/' + id);
            }

        },
        mounted() {
            this.getAgentInfo();
        },
        filters: {
            formatDate(time) {
                if (time){
                    let date = new Date(time);
                    return formatDate(date, 'yyyy-MM-dd')
                }
                return '--';
            }
        }
    }
</script>

<style scoped>

</style>
